<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Title</title>
<!--  <link rel="stylesheet" href="stylesheets/reset.css">-->
  <link rel="stylesheet" href="stylesheets/index.css">
</head>
<body>

<div id="app">
  <div>
    <span>用户名</span>
    <input v-model="userinfo.uname" type="text">
  </div>
  <div>
    <span>手机号</span>
    <input v-model="userinfo.phone" type="text">
  </div>
  <div>
    <span>密码</span>
    <input v-model="userinfo.pwd" type="password">
  </div>
  <div>
    <span>性别</span>
    <input value="男"  v-model="userinfo.sex" type="radio">男
    <input value="女"  v-model="userinfo.sex" type="radio">女
  </div>
  <div>
    <span>爱好</span>
    <input value="乒乓"  v-model="userinfo.aihao" type="checkbox">乒乓
    <input value="篮球" v-model="userinfo.aihao" type="checkbox">篮球
    <input value="足球" v-model="userinfo.aihao" type="checkbox">足球
  </div>
  <div>
    <span>城市</span>
    <select v-model="userinfo.city">
      <option>西安</option>
      <option>渭南</option>
      <option>宝鸡</option>
    </select>
  </div>
  <div>
    <span>简介</span>
    <textarea v-model="userinfo.desc"></textarea>
  </div>

  <div>
    <button @click="submitUserInfo">提交</button>
  </div>

  <hr>
  <br>
  <br>
  <br>
  <br>
  <br>

<!--
v-model 会忽略所有表单元素的 value、checked、selected
.lazy    oninput => onchange
.number  parseFloat(value)
.trim    value.trim()
-->
<!--  <input v-model.lazy="message" placeholder="edit me">-->
<!--  <input v-model.number="message" placeholder="edit me">-->
<!--  <input v-model="message" placeholder="edit me">-->
<!--  <input v-model.trim="message" placeholder="edit me">-->
<!--  <p>Message is: {{ message }}</p>-->
<!--
 <input v-model="message" placeholder="edit me">
 <textarea v-model="message"></textarea>
  <p>Message is: {{ message }}</p>
 -->

  <!--
  <input
    type="checkbox"
    id="checkbox"
    v-model="checked"
    true-value="yes"
    false-value="no"
  >
  <label for="checkbox">{{ checked }}</label>-->

  <!--<input
    type="checkbox"
    id="checkbox"
    v-model="checked"
  >
  <label for="checkbox">{{ checked }}</label>-->

  <!--
  <input type="checkbox" id="jack" value="乒乓" v-model="checkedNames">
  <label for="jack">乒乓</label>

  <input type="checkbox" id="john" value="游泳" v-model="checkedNames">
  <label for="john">游泳</label>

  <input type="checkbox" id="mike" value="篮球" v-model="checkedNames">
  <label for="mike">篮球</label>

  <br>
  <span>Checked names: {{ checkedNames }}</span>
  -->

  <!--
  <label>
    <input type="radio" value="1" v-model="sex">
    <span>男</span>
  </label>
  <label>
    <input type="radio" value="0" v-model="sex">
    <span>女</span>
  </label>
  <label>
    <input type="radio" value="2" v-model="sex">
    <span>未知</span>
  </label>
  <div>你当前选中的性别是: {{ sex }}</div>-->

  <select v-model="city">
<!--    <option value="">&#45;&#45;&#45;&#45;</option>-->
    <option v-for="item of cityData">{{ item }}</option>

    <!--
    <option value="">&#45;&#45;&#45;&#45;</option>
    <option value="01">西安</option>
    <option value="02">咸阳</option>
    <option>渭南</option>
    <option>汉中</option>
    <option>宝鸡</option>-->
  </select>
  <span>选中的城市：{{ city }}</span>

  <!--
  <select v-model="mCity" multiple>
    <option value="">&#45;&#45;&#45;&#45;</option>
    <option value="01">西安</option>
    <option value="02">咸阳</option>
    <option>渭南</option>
    <option>汉中</option>
    <option>宝鸡</option>
  </select>
  <span>选中的城市：{{ mCity }}</span>-->

</div>


<script src="js/vue.js"></script>
<script src="js/index.js"></script>
</body>
</html>
